<div ng-controller="MultipleServerController">

  <div ng-show="!agentActive">
    <div class="col-md-12 studio-well-tips">
      <h4 ng-bind-html=" 'agent.notFound' | translate:links "></h4>
    </div>
  </div>
  <div class="row" ng-show="agentActive">
    <div class="{{serverClass}}" ng-repeat="server in servers" ng-controller="SingleServerController">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>{{ server.name }}</b>
          <div class="panel-node-actions">
            <ng-include src="'views/widget/restartButton.html'"></ng-include>
          </div>
        </div>


        <div class="panel-body">
          <div class="row">
            <div class="col-md-3">
              <div id="{{'cpu-gauge-' + server.name}}" c3-gauge value="cpuPercent" height="height"></div>
              <div class="chart-label text-center">
                <span>CPU</span>
              </div>
            </div>
            <div class="col-md-3">
              <div id="{{'ram-gauge-' + server.name}}" c3-gauge value="ramPercent" height="height"></div>
              <div class="chart-label text-center">
                <span>RAM</span>
                <br>
                <span>
                  <b>{{usedRam | toSizeString}} / {{maxRam | toSizeString}}</b>
                </span>
              </div>
            </div>
            <div class="col-md-3">

              <div id="{{'disk-cache-gauge-' + server.name}}" c3-gauge value="diskCache" height="height"></div>
              <div class="chart-label text-center">
                <span>DISK CACHE</span>
                <br>
                <span>
                  <b>{{totalDiskCache | toSizeString}} / {{maxDiskCacke | toSizeString}}</b>
                </span>
              </div>
            </div>
            <div class="col-md-3">

              <div id="{{'disk-gauge-' + server.name}}" c3-gauge value="diskPercent" height="height"></div>
              <div class="chart-label text-center">
                <span>DISK</span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <b>Status:</b>
              <span ng-class="getStatusLabel(server.status)">{{ server.status }}</span>

              <a ng-show="!agent" href="javascript:void(0)" tabindex="1" data-trigger="focus" data-placement="bottom" data-content="{{ 'agent.notFound' | translate:links }}"
                bs-popover>
                <i class="fa fa-question-circle"></i>
              </a>
            </div>
            <div class="col-md-6">
              <b>Operations:</b> {{operations}} /s</span>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <b>Active Connections:</b> {{connections}}</span>
            </div>
            <div class="col-md-6">
              <b>Network Requests:</b> {{requests}} /s</span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <b>Average Latency:</b> {{latency}} ms</span>
            </div>
            <div class="col-md-6">
              <b>Warnings:</b> {{ tips }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row" ng-show="agentActive">
    <div class="{{serverClass}}" ng-repeat="server in servers" ng-controller="SingleChartServerController">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>Server {{ server.name}} Operations / Sec </b>
        </div>
        <div class="panel-body">


          <div server-chart server="server" headers="transactionHeaders"></div>

        </div>
      </div>
    </div>
  </div>
</div>